<template>
    <div class="p13">
        <div class="p13-center-right" @click="isIframe">
        </div>
        <viewBg ref = 'viewBg'></viewBg>
        <div class="p13-center-right2" @click="isIframe2">
        </div>
        <viewBg2 ref = 'viewBg2'></viewBg2>

    </div>
</template>
<script>
import WOW from "wow.js";
import clickoutside from "../../assets/directives/clickoutside.js";
import viewBg from "./viewBg.vue";
import viewBg2 from "./viewBg2.vue";
export default {
    name:"P13",
    components: {viewBg,viewBg2},
    created() {
        new WOW().init();
    },
    mounted() {
        document.addEventListener("keyup", this.changePage);
    },
    data() {
        return {
            showIframe: true,
        }
    },
    methods: {
        changePage(e) {
            //右键
            if (e.keyCode == 40||e.keyCode==34) {
                this.$router.replace(`/ppt/p14`);
            }
            //左键
            if (e.keyCode == 38||e.keyCode==33) {
                this.$router.replace(`/ppt/p12`);
            }
        },
        isIframe(e) {
            this.$refs.viewBg.init();
            e.stopPropagation();
        },
        isIframe2(e) {
            this.$refs.viewBg2.init();
            e.stopPropagation();
        }
    },
    beforeDestroy() {
        document.removeEventListener("keyup", this.changePage);
    },
    watch: {
        $route: {
        handler(n, v) {
            document.addEventListener("keyup", this.changePage);
        },
        deep: true
        }
    }
}
</script>
<style lang="scss" scoped>
.p13{
    background-image: url("../../assets/images/pptScreen/pFirst/13.png");
    position: relative;
}
.p13-center-right{
    position: absolute;
    width: 387px;
    height: 60px;
    top: 627px;
    left: 1300px;
    cursor: pointer;
}
.p13-center-right2{
    position: absolute;
    width: 393px;
    height: 60px;
    top: 801px;
    left: 1298px;
    cursor: pointer;
}

.iframe{
  width: 1400px;
  position: absolute;
  background-color: #fff;
  z-index: 999;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
  }
}
</style>
